<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土壤知识趣味问答</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background: linear-gradient(135deg, #8bc34a 0%, #4caf50 100%);
            color: #333;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 100%;
            max-width: 800px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            position: relative;
        }

        header {
            background: #4a7c5f;
            color: white;
            padding: 25px 30px;
            text-align: center;
        }

        h1 {
            font-size: 32px;
            margin-bottom: 10px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }

        .subtitle {
            font-size: 18px;
            opacity: 0.9;
        }

        .progress-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background: #e9f5ee;
            border-bottom: 1px solid #d0e2d7;
        }

        .progress-text,
        .score {
            font-size: 18px;
            color: #4a7c5f;
            font-weight: bold;
        }

        .quiz-content {
            padding: 30px;
        }

        .question-type {
            color: #4a7c5f;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }

        .question {
            font-size: 22px;
            line-height: 1.6;
            margin-bottom: 30px;
            text-align: center;
            padding: 0 10px;
        }

        .options {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .option {
            padding: 15px 30px;
            border: 2px solid #4a7c5f;
            border-radius: 10px;
            background: white;
            color: #4a7c5f;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 120px;
            text-align: center;
        }

        .option:hover {
            background: #f0f7f3;
        }

        .option.selected {
            background: #4a7c5f;
            color: white;
        }

        .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            padding: 0 30px 30px;
        }

        .btn {
            padding: 14px 28px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 140px;
        }

        .btn-primary {
            background: #4a7c5f;
            color: white;
            box-shadow: 0 4px 8px rgba(74, 124, 95, 0.3);
        }

        .btn-primary:hover {
            background: #3a6650;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #e9f1eb;
            color: #4a7c5f;
        }

        .btn-secondary:hover {
            background: #d9e6dc;
            transform: translateY(-2px);
        }

        .links {
            display: flex;
            justify-content: center;
            gap: 40px;
            padding: 25px 30px;
            background: #f0f7f3;
            border-top: 1px solid #d0e2d7;
        }

        .link-item {
            color: #4a7c5f;
            text-decoration: none;
            font-size: 18px;
            display: flex;
            align-items: center;
            transition: all 0.3s;
        }

        .link-item:hover {
            color: #3a6650;
            transform: translateY(-2px);
        }

        .dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #4a7c5f;
            border-radius: 50%;
            margin-right: 10px;
        }

        .feedback {
            text-align: center;
            margin-top: 15px;
            font-size: 18px;
            font-weight: bold;
            min-height: 27px;
        }

        .correct {
            color: #4caf50;
        }

        .incorrect {
            color: #f44336;
        }

        .start-prompt {
            text-align: center;
            font-size: 20px;
            color: #666;
            padding: 40px 20px;
        }

        @media (max-width: 600px) {
            .options {
                flex-direction: column;
                align-items: center;
            }

            .option {
                width: 100%;
                max-width: 250px;
            }

            .buttons {
                flex-direction: column;
                align-items: center;
            }

            .btn {
                width: 100%;
                max-width: 250px;
            }

            .links {
                flex-direction: column;
                gap: 15px;
                align-items: center;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <header>
                <h1>土壤知识趣味问答</h1>
                <p class="subtitle">测试你的土壤知识，看看你对脚下的土地了解多少！</p>
            </header>

            <div class="progress-container">
                <div class="progress-text">进度 {{ currentQuestion }}/{{ totalQuestions }}</div>
                <div class="score">得分: {{ score }}</div>
            </div>

            <div class="quiz-content">
                <div v-if="currentQuestion === 0">
                    <p class="start-prompt">点击开始按钮开始问答</p>
                </div>
                <div v-else>
                    <div class="question-type">判断题</div>
                    <div class="question">{{ currentQuestionData.question }}</div>
                    <div class="options">
                        <div class="option" :class="{ selected: selectedAnswer === '正确' }" @click="selectAnswer('正确')">
                            正确</div>
                        <div class="option" :class="{ selected: selectedAnswer === '错误' }" @click="selectAnswer('错误')">
                            错误</div>
                    </div>
                    <div class="feedback" :class="feedbackClass">{{ feedback }}</div>
                </div>
            </div>

            <div class="buttons">
                <button class="btn btn-primary" @click="startQuiz" v-if="currentQuestion === 0">开始回答</button>

                <button class="btn btn-primary" @click="confirmAnswer" v-if="currentQuestion > 0 && !answerConfirmed"
                    :disabled="!selectedAnswer">确认答案</button>

                <button class="btn btn-secondary" @click="nextQuestion"
                    v-if="answerConfirmed && currentQuestion < totalQuestions">下一题</button>

                <button class="btn btn-secondary" @click="restartQuiz" v-if="currentQuestion > 0">重新开始</button>
            </div>

            <div class="links">
                <a href="#" class="link-item"><span class="dot"></span>三维展厅</a>
                <a href="#" class="link-item"><span class="dot"></span>普查宣传视频</a>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentQuestion: 0,
                totalQuestions: 10,
                score: 0,
                selectedAnswer: null,
                answerConfirmed: false,
                feedback: '',
                feedbackClass: '',
                questions: [
                    {
                        question: "土壤是地球表面唯一能够生长植物的疏松表层。",
                        answer: "正确",
                        explanation: "土壤是由矿物质、有机质、水、空气和生物组成的，能够支持植物生长的地球表层。"
                    },
                    {
                        question: "所有类型的土壤都适合种植农作物。",
                        answer: "错误",
                        explanation: "不同的土壤类型具有不同的特性，有些土壤可能缺乏必要的养分或排水不良，不适合种植农作物。"
                    },
                    {
                        question: "土壤侵蚀是一个自然过程，人类活动不会加速它。",
                        answer: "错误",
                        explanation: "虽然土壤侵蚀是一个自然过程，但人类活动如 deforestation 和不当的农业实践会显著加速土壤侵蚀。"
                    },
                    {
                        question: "蚯蚓对土壤健康有益。",
                        answer: "正确",
                        explanation: "蚯蚓通过挖洞改善土壤结构，通过消化有机物质增加土壤肥力，对土壤健康非常有益。"
                    },
                    {
                        question: "土壤pH值不会影响植物生长。",
                        answer: "错误",
                        explanation: "土壤pH值直接影响植物对养分的吸收能力，不同植物对pH值有不同的需求。"
                    },
                    {
                        question: "有机质是健康土壤的重要组成部分。",
                        answer: "正确",
                        explanation: "有机质提供植物所需的养分，改善土壤结构，增加土壤保水能力，是健康土壤的关键组成部分。"
                    },
                    {
                        question: "土壤颜色可以指示其组成和性质。",
                        answer: "正确",
                        explanation: "土壤颜色可以反映其有机质含量、矿物质组成和排水状况，是土壤分类的重要指标。"
                    },
                    {
                        question: "所有土壤的深度都相同。",
                        answer: "错误",
                        explanation: "土壤深度因地理位置、气候、母质和地形等因素而异，从几厘米到数米不等。"
                    },
                    {
                        question: "轮作有助于保持土壤肥力。",
                        answer: "正确",
                        explanation: "轮作可以防止土壤养分耗尽，减少病虫害积累，有助于保持和改善土壤肥力。"
                    },
                    {
                        question: "土壤污染不会影响地下水质量。",
                        answer: "错误",
                        explanation: "污染物可以从土壤渗入地下水，污染饮用水源，对生态系统和人类健康造成威胁。"
                    }
                ]
            },
            computed: {
                currentQuestionData() {
                    return this.questions[this.currentQuestion - 1];
                }
            },
            methods: {
                startQuiz() {
                    this.currentQuestion = 1;
                    this.score = 0;
                    this.selectedAnswer = null;
                    this.answerConfirmed = false;
                    this.feedback = '';
                },
                selectAnswer(answer) {
                    if (!this.answerConfirmed) {
                        this.selectedAnswer = answer;
                    }
                },
                confirmAnswer() {
                    if (this.selectedAnswer) {
                        this.answerConfirmed = true;
                        const isCorrect = this.selectedAnswer === this.currentQuestionData.answer;

                        if (isCorrect) {
                            this.score += 10;
                            this.feedback = "回答正确！" + this.currentQuestionData.explanation;
                            this.feedbackClass = "correct";
                        } else {
                            this.feedback = "回答错误！正确答案是：" + this.currentQuestionData.answer + "。" + this.currentQuestionData.explanation;
                            this.feedbackClass = "incorrect";
                        }
                    }
                },
                nextQuestion() {
                    if (this.currentQuestion < this.totalQuestions) {
                        this.currentQuestion++;
                        this.selectedAnswer = null;
                        this.answerConfirmed = false;
                        this.feedback = '';
                    } else {
                        alert(`恭喜完成所有题目！您的最终得分是：${this.score}`);
                        this.restartQuiz();
                    }
                },
                restartQuiz() {
                    this.currentQuestion = 0;
                    this.score = 0;
                    this.selectedAnswer = null;
                    this.answerConfirmed = false;
                    this.feedback = '';
                }
            }
        });
    </script>
</body>

</html>